<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-24 09:53:26
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-24 10:47:21
 * @FilePath: /consult-patient-vue3-ts/src/views/Home/components/FollowDoctor.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DoctorCard from './DoctorCard.vue'
import { getDoctorPage } from '@/services/consult'
import type { DoctorList } from '@/types/consult'
// 使用 @vueuse/core中获取设备宽度
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()

const list = ref<DoctorList>([])
const loadData = async () => {
    const res = await getDoctorPage({ current: 1, pageSize: 5 })
    list.value = res.data.rows
}
onMounted(() => loadData())


</script>

<template>
    <div class="follow-doctor">
        <div className="head">
            <p>推荐关注</p>
            <a href="javascript:;"> 查看更多<i class="van-icon van-icon-arrow" /></a>
        </div>
        <div class="body">
            <van-swipe :width="(150 / 375) * width" :show-indicators="false" :loop="true" autoplay="3000">
                <van-swipe-item v-for="(item, index) in list" :key="index">
                    <doctor-card :item="item" />
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
    background-color: var(--cp-bg);
    height: 250px;

    .head {
        display: flex;
        justify-content: space-between;
        height: 45px;
        align-items: center;
        padding: 0 15px;
        font-size: 13px;

        >a {
            color: var(--cp-tip);
        }
    }

    .body {
        width: 100%;
        overflow: hidden;
    }
}
</style>